<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button class="filter-item" type="success" @click="handleAdd"> 添加智能场景 </el-button>
    </div>

    <el-table :data="autos" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-row :gutter="20">
            <el-col :xs="12" :sm="12" :lg="12" class="card-panel-col">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <h2>如果</h2>
                </div>
                <el-table :data="props.row.condition" style="width: 100%">
                  <el-table-column label="设备" align="center" prop="name" />
                  <el-table-column label="位置" align="center" prop="position" />
                  <el-table-column label="SN" align="center" prop="sn" />
                  <el-table-column label="发生" align="center" prop="logic">
                    <template slot-scope="{row}">
                      <span v-if="row.tag==='infrared'">{{ row.status | infraredStatusFilter }}</span>
                      <span v-if="row.tag==='door'">{{ row.status | doorStatusFilter }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="12" class="card-panel-col">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <h2>就执行</h2>
                </div>
                <el-table :data="props.row.run" style="width: 100%">
                  <el-table-column label="设备" align="center" prop="name" />
                  <el-table-column label="位置" align="center" prop="position" />
                  <el-table-column label="SN" align="center" prop="sn" />
                  <el-table-column label="动作" align="center" prop="logic">
                    <template slot-scope="{row}">
                      <span v-if="row.tag==='switch'">{{ row.status | switchStatusFilter }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column label="ID" type="index" align="center" />
      <el-table-column label="名称" align="center" prop="name" />
      <el-table-column label="逻辑" align="center" prop="logic">
        <template slot-scope="{row}">
          <el-tag :type="row.logic | logicTypeFilter">{{ row.logic | logicFilter }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="启动" align="center">
        <template slot-scope="{row}">
          <el-switch
            v-model="row.enable"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="onEnableChange(row)"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{row}">
          <el-button type="primary" @click="toEdit(row)"> 编辑 </el-button>
          <el-button type="warning" @click="toInfo(row)"> 详情 </el-button>
          <el-button type="danger" @click="handleDelete(row)"> 删除 </el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import { getAutos, deleteAuto, editAuto } from '@/api/auto'

export default {
  name: 'Auto',
  components: { },
  filters: {
    logicFilter(logic) {
      if (logic === 'and') {
        return '同时满足'
      }
      if (logic === 'or') {
        return '满足任一条件'
      }
    },
    logicTypeFilter(logic) {
      if (logic === 'and') {
        return 'success'
      }
      if (logic === 'or') {
        return 'warning'
      }
    },
    infraredStatusFilter(status) {
      if (status === 1) {
        return '有人'
      }
      if (status === 0) {
        return '无人'
      }
    },
    doorStatusFilter(status) {
      if (status === 1) {
        return '开启'
      }
      if (status === 0) {
        return '关闭'
      }
    },
    switchStatusFilter(status) {
      if (status === 1) {
        return '开启'
      }
      if (status === 0) {
        return '关闭'
      }
    },
    enableFilter(status) {
      if (status === 1) {
        return '开启'
      }
      if (status === 0) {
        return '关闭'
      }
    }
  },
  data() {
    return {
      formLabelWidth: '200px',
      device: null,
      autoListLoading: false,
      autos: [{ condition: [], run: [] }]
    }
  },
  created() {
    console.log('设备信息')
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.autoListLoading = true
      getAutos().then(response => {
        this.autoListLoading = false
        var data = response.data
        console.log(data)
        if (data === null) {
          this.autos = []
        } else {
          for (var i = 0; i < data.length; i++) {
            data[i].condition = JSON.parse(data[i].condition)
            data[i].run = JSON.parse(data[i].run)
          }
          this.autos = data
        }
      })
    },
    // 提交保存
    handleSubmit() {
    },
    toEdit(row) {
      this.$router.push({ path: '/auto/edit', query: row })
    },
    toInfo(row) {
      this.$router.push({ path: '/auto/info', query: row })
    },
    handleAdd() {
      this.$router.push({ path: '/auto/add' })
    },
    onEnableChange(row) {
      console.log(row)
      editAuto(row).then(response => {
        if (response.code === 200) {
          this.$message({ type: 'success', message: response.message })
        }
      })
    },
    handleDelete(row) {
      this.$confirm('删除智能场景[' + row.name + '], 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteAuto(row.id).then(response => {
          if (response.code === 200) {
            this.$message({
              type: 'success',
              message: response.message
            })
            this.fetchData()
          } else this.$message(response.message)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.box-card{
  margin-bottom: 20px;
}

.plus{
  min-width: 100%;
  min-height: 300px;
  text-align: center;
  font-size: 108px;
}

 .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
  }

</style>
